/*
 * @Description: 导入按钮
 * @Author: Zzt
 * @Date: 2022-12-29 11:25:22
 * @LastEditTime: 2023-02-07 17:10:07
 */

import { useMemo, useState } from 'react';
import { Button, Modal, Space, Typography, Upload } from 'antd';
import classNames from 'classnames/bind';
import { UploadOutlined } from '@ant-design/icons';
import { saveFolderLevel } from '@/api/accession';
import { uploadPath } from '@/api/upload';
import TransferTemplate from '@/components/TransferTemplate';
import { EnumTemplateTypes } from '@/view/system/TemplateManage/dictionaries';
import type { UploadChangeParam, UploadFile } from 'antd/lib/upload';
import type { InputStatus } from 'antd/es/_util/statusUtils';
import styles from '../../styles/uploadFolderDialog.module.scss';

const cx = classNames.bind(styles);
const ImportBtn = (props: any) => {
  const { batchData } = props;
  console.log('batchData', batchData);

  const [visible, setVisible] = useState(false);

  // 选中的模板
  const [selectTemplate, setSelectTemplate] = useState(null);
  // 模板选择框状态
  const [templateState, setTemplateState] = useState<InputStatus>('');
  // 当前层级是否已上传标志
  const [currentUploaded, setCurrentUploaded] = useState(false);
  // 存储上传成功后返回的完整条目数据
  const [latestRecord, setLatestRecord] = useState({});

  const onCancel = () => {
    setVisible(false);
  };

  /**
   * @description: 上传变化回调
   * @param {any} info
   */
  const onChange = (info: UploadChangeParam<UploadFile>) => {
    const { file } = info;
    if (file.status === 'done') {
      saveExcel(file, file.response);
    }
  };
  const saveExcel = (file: UploadFile, res: any) => {
    const params: any = { batchId: batchData.id };
    params.folderAtt = {
      fileSize: file.size,
      fileUrl: res.data?.url || '',
      level: batchData.levelList[0].level,
      status: true
    };
    saveFolderLevel(params).then((res) => {
      console.log('save s', res.data);
      setLatestRecord(res.data);
    });
  };
  return (
    <>
      <Button onClick={() => setVisible(true)}>导入</Button>
      {useMemo(
        () => (
          <Modal
            title="征集条目导入"
            visible={visible}
            // className={cx('upload-floder-dialog')}
            width={600}
            maskClosable={false}
            destroyOnClose
            onCancel={onCancel}
            footer={[
              <Button key="close" onClick={onCancel}>
                关闭
              </Button>,
              <Button key="finish" type="primary" onClick={() => onCancel()}>
                导入
              </Button>
            ]}
          >
            <Space className={cx('select-template__wrap')}>
              <h4>请选择模板</h4>
              <TransferTemplate
                tplType={EnumTemplateTypes.ExcelImport}
                value={selectTemplate}
                templateState={templateState}
                onChange={setSelectTemplate}
              />
            </Space>
            <div className={cx('steps-wrap')}>
              <Typography.Text className={cx('step--title')}>请上传征集条目EXCEL</Typography.Text>
              {currentUploaded && <Typography.Text type="success">已上传</Typography.Text>}
              <Upload
                accept=".xlsx,.csv,.xls"
                action={uploadPath}
                name="file"
                maxCount={1}
                onChange={onChange}
              >
                <Button icon={<UploadOutlined />} type="link">
                  点击上传
                </Button>
              </Upload>
            </div>
          </Modal>
        ),
        [visible]
      )}
    </>
  );
};
export default ImportBtn;
